<template>
	<view>
		<!-- 页首 -->
		<zw-header></zw-header>
		<menu-wrapper active-index="2-1" style="background-color: #fff;padding: 0;">
			<view style="padding: 30rpx;margin-top: 25px;width: 100%;border-radius: 14px;opacity: 0.8;">
				<view v-if="data.user" class="display" style="margin-top: 0;justify-content: space-between;">
					<view style="display: flex;justify-content: flex-start;align-items: center;" @click="goUrl('/pages/find/home/home?id='+data.user.id)">
						<fui-avatar :src="data.user.avator"></fui-avatar>
						<view style="color: #000;font-size: 36rpx;margin-left: 20rpx;">{{data.user.name}}</view>
						<view class="bigEmpty">
							<view v-show="!data.user.focused" style="width: 150rpx;"
								class="btnBlue line textwhite8 marginLeft" @click="foucus(data.user) ">+关注</view>
							<view v-show="data.user.focused" style="width: 150rpx;"
								class="btnBlue line textwhite8 marginLeft" @click="foucus(data.user) ">已关注</view>
						</view>
					</view>
					<view>
						<view
							style="padding: 5rpx;background-color: #FFFFFF;border: 1px solid #B5B5B5;border-radius:100rpx;width: 140rpx;display: flex;justify-content: space-between;align-items: center;">
							<image @click="showMenu = !showMenu" style="width: 50rpx;" mode="widthFix"
								src="/static/image/user/credit/s.png"></image>
							<image @click="showMenu = !showMenu" style="width: 50rpx;" mode="widthFix"
								src="/static/image/info/fx.png"></image>
						</view>
					</view>
				</view>
				<view class="display">
					<image src="/static/image/info/tz.png" style="width: 120rpx;" mode="widthFix"></image>
					<view style="color: #FFFFFF;font-size: 36rpx;margin-left: 20rpx;font-weight: bold;">{{data.name}}
					</view>
				</view>

			</view>
			<view>
				<view class="container">
					<view style="width: 75%;">
						<view class="display" style="color: #000;font-size: 15px;font-weight: 500;">
							{{data.content}}
						</view>
						<view style="display: flex;justify-content: center;background: #F0F0F0;margin-top: 40rpx;height: 1500rpx;">
							<view >
								<swiper indicator-dots	indicator-color="rgba(255, 255, 255, 0.7);" indicator-active-color="#fff" style="height: 100%;width: 800rpx;">
									<swiper-item v-for="(item,index) in data.formatImages"
										style="display: flex;justify-content: center;align-items: center;background-color: #000;">
										<image :src="item" style="width: 800rpx;" mode="widthFix">
										</image>
									</swiper-item>
								</swiper>
							</view>
						</view>
						
					</view>
					<view style="width: 25%;">
						<view
							style="width: 100%;display: flex;justify-content: flex-start;align-items: center;background: #F0F0F0;border-radius: 14px;margin-left: 40rpx;margin-top: 40rpx;">
							<view style="width: 220rpx;height: 220rpx;margin: 20rpx;">
								<image :src="data.formatImages[0]"
									style="width: 100%;height: 100%;border-radius: 28rpx;"></image>
							</view>
							<view style="margin-left: 26rpx;margin-right: 60rpx;">
								<view style="font-size: 18px;font-weight: 500;color: #3D3D3D;">{{data.name}}</view>
								<view
									style="display: flex;justify-content: space-between;align-items: center;font-size: 12px;color: #666666;margin-top: 8rpx;">
									<view>点赞:{{data.loveNum}}</view>
									<view>被同款:{{data.sameProductNum||0}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="line marginTop marginLeft marginRight">
					<view style="font-size: 28rpx;">评论：{{commentList.length}}条</view>
					<view class="bigEmpty"></view>
					<view style="font-size: 24rpx; color: #666;">举报</view>
				</view>
				<view class="lineGray marginTop"></view>
				<view class="column padding-large" v-show="commentList.length==0"
					style="color: #999999;font-size: 36rpx;">
					<view>
						<image class="image-small" src="/static/image/info/nocomment.png"></image>
					</view>
					<view>暂时还没有评论</view>
					<view>快来说说你的看法吧</view>
				</view>
				<view v-show="commentList.length!=0">
					<view v-for="(item,index) in commentList">
						<view class="padding">
							<view class="line" @click="commendItemClick(item,item.child)">
								<image class="image-head-small" :src="item.user.avator"></image>
								<view class="marginLeft">{{item.user.name}}</view>
								<view class="marginLeft bigEmpty">{{item.createTime}}</view>
							</view>
							<view class="marginTop">{{item.content}}</view>
							<view class="marginLeft bg-gray-circle-rect marginTop" v-show="item.child.length!=0"
								@click="commendItemClick(inItem,item.child)">
								<view class="padding " v-for="(inItem,index) in item.child">
									<view class="line">
										<image class="image-head-small" :src="inItem.user.avator"></image>
										<view class="marginLeft">{{inItem.user.name}}</view>
										<view class="marginLeft bigEmpty">{{inItem.createTime}}</view>
									</view>
									<view class="marginTop">{{inItem.content}}</view>
									<view class="lineGray marginTop"></view>
								</view>
							</view>
							<view class="padding"></view>
							<view class="lineGray marginTop"></view>
						</view>
					</view>
				</view>
				<view style="height: 150rpx;"></view>
				<view class=" column bgWhite width100 ">

					<view class="lineGray"></view>
					<view class="padding line  width100  "
						style="display: flex;justify-content: space-between;align-items: center;">

						<view style="display: flex;justify-content: flex-start;align-items: center;">
							<view class="column marginLeft " style="margin-left: 40rpx;">
								<image v-if="data.loved" @click="love(data)" class="icon-normal"
									src="/static/image/info/star1.png">
								</image>
								<image v-else @click="love(data)" class="icon-normal" src="/static/image/info/star.png">
								</image>
								<view>
									{{data.loveNum}}
								</view>
							</view>
							<view class="column marginLeft " style="margin-left: 40rpx;">
								<image v-if="data.loved" @click="love(data)" class="icon-normal"
									src="/static/image/info/love1.png">
								</image>
								<image v-else @click="love(data)" class="icon-normal" src="/static/image/info/love.png">
								</image>
								<view>
									{{data.loveNum}}
								</view>
							</view>

							<view class="column marginLeft " style="margin-left: 40rpx;">

								<image class="icon-normal" src="/static/image/info/msg.png">
								</image>
								<view>
									{{commentList.length}}
								</view>
							</view>

						</view>
						<view class="margin-left-3 bigEmpty line marginRight"
							style="border: 1px solid #C4BFBF;background: #F0F0F0;border-radius: 100px;">
							<text v-show="comment[0]==' '">
								{{replayName}}
							</text>
							<input class="bigEmpty" style="padding-left: 40rpx;" placeholder="说点啥吧..." v-model="comment"
								@input="onInput" />
							<div style="width: 100rpx;" class=" paddingSmall bg-gray-circle-rect line" @click="send()">
								发送</div>
						</view>
					</view>

				</view>
			</view>
		</menu-wrapper>
	</view>
</template>

<script>
	import menuWrapper from '@/components/user/common/menu-wrapper.vue';
	import centerConfig from '@/common/config/user/center.config.js';

	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			menuWrapper
		},
		data() {
			return {
				ispl: false,
				...centerConfig,
				accountInfo: {},
				counts: [],
				tabIndex: 1,
				data: [],
				page: 0,
				nameKey: '',
				id: 0,
				commentList: [],
				comment: [],
				replayName: '',
			}
		},
		computed: {
			...mapState(['loginUser']),
			currentTime() {
				const currentHour = new Date().getHours();
				const timeQuantums = ['凌晨', '上午', '下午', '晚上'];
				return timeQuantums[Math.floor(currentHour / 6)];
			}
		},
		onLoad(op) {
			this.id = op.id;
			this.getInfo();
			this.queryComment()
			this.$store.commit('tab', 4);
		},
		methods: {
			queryComment() {
				const url = getApp().globalData.apiUrl + "/api/v1/comment/all"
				const that = this
				this.$util.request('/api/v1/comment/all', {
					pictureCollectionId: this.id,
					size: 100
				}, (res) => {
					console.log('comment', res)
					that.commentList = res.data
				}, true);
			},
			goUrl(url) {
				uni.navigateTo({
					url: url,
					fail(err) {
						console.log(err)
					}
				})
			},

			getInfo() {
				let that = this;
				this.$util.request('/api/v1/pictureCollection/' + this.id, {}, (res) => {
					console.log('pictureCollection', res.data)
					that.data = res.data;
				}, true);
			},
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		justify-content: space-between;
		// align-items: center;
		// flex-direction: column;
	}

	.display {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 50rpx;

		.active {
			color: #000000;
			font-weight: bold;
		}
	}

	.wrap {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bottom-item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 30rpx;

		.image {
			margin-right: 10rpx;
			width: 20rpx;
			height: 20rpx;
		}
	}

	.lable {
		font-family: Source Han Sans;
		font-size: 80rpx;
		font-weight: bold;
		font-feature-settings: "kern" on;
		color: #3D3D3D;

	}

	.publish {
		background: #FFFFFF;
		height: 70rpx;
		color: #000000;
		border-radius: 100rpx;
		font-size: 28rpx;
		padding: 0rpx 30rpx 0rpx 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #C4BFBF;
		margin-right: 40rpx;
	}
</style>